<template>
  <!--选择阶梯-->
  <cj-popup v-model="isShowBuy" round position="bottom" v-if="!isMall && dataInfo.collage && dataInfo.collage.collageGroupType == 2 && dataInfo.collage.collageGrades && dataInfo.collage.collageGrades.length > 0" :close-on-click-overlay="false" class="changeline-popup c-ph24 c-pv24">
    <div class="c-flex-row c-justify-sb">
      <div class="c-flex-row">
        <div class="c-ww104 c-hh70 c-text-hidden c-flex-row c-flex-center c-flex-shrink0">
          <div class="c-w100 c-p">
            <vip-custom-img :cover="vipInfo && vipInfo.cover ? vipInfo.cover : {}" :coverUrl="dataInfo && dataInfo.collage.cover ? dataInfo.collage.cover : ''" :prodType="dataInfo.collage ? dataInfo.collage.prodType : ''" :imgClass="'imgCloseBig'" :fontClass="{
              boxStyle: 'c-pv40 c-pl12',
              name: 'c-fs32 c-text-ellipsis1 c-fw-b', duration: 'c-fs26'}" :content="vipInfo ? {name: vipInfo.name, duration: vipInfo.duration, durationType: vipInfo.durationType} : {}" />
          </div>
        </div>
        <div class="c-flex-column c-hh70 c-justify-sb c-ml20">
          <div class="c-flex-row c-aligni-center">
            <template v-if="dataInfo.collage.captainPriceType == 1">
              <span class="c-fs26 theme-fc"><span class="c-fs20">￥</span>{{dataInfo.collage.captainPrice}}</span>
            </template>
            <template v-else>
              <span class="c-fs26 theme-fc" v-for="(item, index) in dataInfo.collage.collageGrades" :key="index" v-show="choosePriceIndex == index"><span class="c-fs20">￥</span>{{item.captainPrice}}</span>
            </template>
            <span class="c-fc-white theme-bg c-fs16 c-pv2 c-ph6 c-br16 c-ml12">团长价</span>
          </div>
          <span class="c-fs16 c-fc-gray">原价：{{'￥' | iosPriceFilter}}{{dataInfo.collage.prodPrice}}</span>
        </div>
      </div>
      <span class="iconfont c-fs30 c-fc-sblack" @click="isShowBuy = false;">&#xe6e1;</span>
    </div>
    <div class="c-pt40 c-pb36">
      <div class="c-fs22 c-fc-xblack c-mb30">拼团类型（团员价）</div>
      <div class="c-flex-row c-flexw-wrap">
        <div class="c-pv10 c-ph30 c-fs24 c-br30 c-mr24 c-mb24" :class="choosePriceIndex == index ? 'theme-bd1 theme-fc priceBg' : 'c-fc-xblack c-bg-f6'" v-for="(item,index) in dataInfo.collage.collageGrades" :key="index" @click="choosePriceIndex = index;">￥{{Number(item.price)}}/{{item.grade}}人团</div>
      </div>
    </div>
    <div class="c-fs24 c-fc-white c-textAlign-c c-pv16 c-w100 c-br40 theme-bg" @click="nextChoseBuy()">下一步</div>
  </cj-popup>
</template>
<script>
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { utilJs } from '@/utils/common.js';
export default {
  name: 'Comment',
  components: {
    VipCustomImg
  },
  props: {
    dataInfo: {
      type: Object,
      default: {},
    },
    recType:{
      typeof:String,
      default:"",
    },
    recRelateId:{
      typeof:String,
      default:'',
    },
    goodsRoomId:{
       typeof:String,
      default:0,
    },
    bindPhoneSetting:{
       typeof:Object,
      default:null,
    },
    relType:{
      typeof:String,
      default:'',
    },
  },
  data() {
    return {
      choosePriceIndex:0,
      isShowBuy:false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      cfrom: global.ckFrom,
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      collageProdTypeToNew: {
        '5': global.ckFrom.collageCourse,
        '9': global.ckFrom.collageColumn,
        '1': global.ckFrom.collageVip,
        '23': global.ckFrom.collageSvip,
        '61': global.ckFrom.collagePackage,
        '51': global.ckFrom.collageLive,
        '7': global.ckFrom.collageActivity,
        '78': global.ckFrom.collageCamp,
        '10': global.ckFrom.collageSocial,
        '41': global.ckFrom.collageClockIn,
        '103': global.ckFrom.distributionCollageColumn,
        '129': global.ckFrom.collageItemBank,
        '116': global.ckFrom.collageEdu,
        '142': global.ckFrom.collageEbooks,
        '180': global.ckFrom.collagePersonalLive,
      },
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  deactivated() {
  },
  mounted() {},
  methods: {
    nextChoseBuy() {
      this.goChoseBuy()
    },
    showBuy() {
      console.log(this.dataInfo, 'dataInfo')
      this.isShowBuy = true
    },
    goPay() {
      let pathQuery = {
        cId: this.dataInfo.collage.groupId,
        extId: this.dataInfo.collage.collageId,
        ckFrom: this.dataInfo.collage.prodType,
        isFromInvite: 0,
        prodId: this.dataInfo.collage.prodId,
        recRelateId: this.recRelateId,
        recType: this.recType,
      };
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
        pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
      }
      if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
        pathQuery.courseType = this.dataInfo.collage.courseType;
      }
      let pathRoute = "/homePage/course/coursePay";
      this.isShowBuy = false
      this.$routerGo(this, "push", {
        path: pathRoute,
        query: pathQuery
      });
    },
    goChoseBuy: function () {
      this.dataInfo.collage.prodType = this.collageProdTypeToNew[this.dataInfo.collage.prodType]
            ? this.collageProdTypeToNew[this.dataInfo.collage.prodType]
            : this.dataInfo.collage.prodType;
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      if (!utilJs.isOpenIosGzhPay(this.dataInfo.collage.prodType)) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
        if ((Number(this.dataInfo.collage.captainPrice) == 0) || this.dataInfo.collage.prodType == this.cfrom.collageActivity || this.isRelForm) {
          let pathQuery = {};
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          utilJs.goBindMobile(pathQuery);
        } else {
          if (this.dataInfo.collage.prodType == this.cfrom.distributionCollageColumn || this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.collageCourse || this.dataInfo.collage.prodType == this.cfrom.collagePackage || this.dataInfo.collage.prodType == this.cfrom.collageLive || this.dataInfo.collage.prodType == this.cfrom.collageCamp || this.dataInfo.collage.prodType == this.cfrom.collageSocial || this.dataInfo.collage.prodType == this.cfrom.collageClockIn || this.dataInfo.collage.prodType == this.cfrom.collageItemBank || this.dataInfo.collage.prodType == this.cfrom.collageEdu || this.dataInfo.collage.prodType == this.cfrom.collagePersonalLive) {
            let ckFrom = this.dataInfo.collage.prodType;
            let pathQuery = {
              cId: -1,
              extId: this.dataInfo.collage.collageId,
              ckFrom: ckFrom,
              isFromInvite: 0,
              isGoPay: true,
              prodId: this.dataInfo.collage.prodId
            };
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = this.goodsRoomId;
            }
            if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
              pathQuery.courseType = this.dataInfo.collage.courseType;
            }
            if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
              pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
            }
            utilJs.goBindMobile(pathQuery);
          } else if (this.dataInfo.collage.prodType == this.cfrom.collageVip || this.dataInfo.collage.prodType == this.cfrom.collageSvip) {
            let pathQuery = {};
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = this.goodsRoomId;
            }
            utilJs.goBindMobile(pathQuery);
          } else {
            let pathQuery = {};
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = this.goodsRoomId;
            }
            if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
              pathQuery.courseType = this.dataInfo.collage.courseType;
            }
            utilJs.goBindMobile(pathQuery);
          }
        }
      } else {
        // 判断什么类型拼图取价格
        let leaderPrice = '';
        if (this.dataInfo.collage.collageGroupType == 2 && this.dataInfo.collage.captainPriceType == 2) {
          this.dataInfo.collage.collageGrades.forEach((val, index) => {
            if (index == this.choosePriceIndex) {
              leaderPrice = val.captainPrice;
            }
          });
        } else {
          leaderPrice = this.dataInfo.collage.captainPrice;
        }
        // groupId 拼团
        if (Number(leaderPrice) == 0) {
          if (this.freeOpenClick == true) {
            this.freeOpenClick = false;
            let $this = this;
            if (this.dataInfo.collectPage == 1 && this.dataInfo.hasFormLog == false && this.dataInfo.isRelForm == true) {
              let pathQuery = {
                relId: this.dataInfo.collage.prodId,
                extId: this.dataInfo.collage.prodId,
                collageId: this.dataInfo.collage.collageId,
                ckFrom: this.dataInfo.collage.prodType,
                relType: this.relType,
                type: 1,
                groupId: -1
              };
              if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
                pathQuery.courseType = this.dataInfo.collage.courseType;
              }
              if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
              }
              if (this.goodsRoomId) {
                pathQuery.goodsRoomId = this.goodsRoomId;
              }
              if (this.isShowFormlg) {
                this.isShowBuy = false
                this.$routerGo(this, "replace", { path: '/homePage/form', query: pathQuery });
              } else {
                this.goPay()
              }
            } else {
              let data = {
                collageId: this.dataInfo.collage.collageId,
              };
              if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                data.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
              }
              utilJs.postMethod(
                global.apiurl + "collage/freeOpenGroup",
                data,
                function (res) {
                  $this.freeOpenClick = true;
                  $this.getCollageDetail();
                },
                function (res) {
                  $this.freeOpenClick = true;
                }
              );
            }
          }
        } else {
          // 参团
          if (this.dataInfo.collage.prodType == this.cfrom.collageActivity) {
            let obj = { activityId: this.dataInfo.collage.activityId, groupId: this.dataInfo.groupId, collageId: this.dataInfo.collage.collageId, prodId: this.dataInfo.collage.prodId, mtkType:2, isRepeatOrder: this.isRepeatOrder };
            let pathQuery = {
              cId: -1,
              extId: this.dataInfo.collage.activityId,
              collageId:this.dataInfo.collage.collageId,
              ckFrom: this.dataInfo.collage.prodType,
              relType: 7,
              type: 1,
              recRelateId: this.recRelateId,
              groupId: -1
            };
            if (this.$route.query.refereeId) {
              obj.refereeId = this.$route.query.refereeId;
            }
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = obj.goodsRoomId = this.goodsRoomId;
            }
            if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
              pathQuery.stepIndex = obj.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
            }
            if (this.dataInfo.collectPage == 1) { // 购买前跳转关联表单，提交后直接跳转到选票页面
              pathQuery.isGoActivityBills = 1;
              let activityBillsData = sessionStorage.getItem("activityBillsData")
              activityBillsData == obj ? obj : this.goChoseBuy(1);
              sessionStorage.setItem('activityBillsData', JSON.stringify(obj))
            }
            if (this.dataInfo.collectPage == 1 && this.dataInfo.hasFormLog == false && this.dataInfo.isRelForm == true && this.isShowFormlg) {
              this.isShowBuy = false
              this.$routerGo(this, "replace", { path: '/homePage/form', query: pathQuery });
            } else {
              this.isShowBuy = false
              this.$routerGo(this, "push", {
                path: "/activity/activityBills",
                query: obj
              });
            }
          } else {
            // 购买前
            if (this.dataInfo.collectPage == 1 && this.dataInfo.hasFormLog == false && this.dataInfo.isRelForm == true) {
              if (this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.social) {
                let pathQuery = {
                  extId: this.dataInfo.collage.prodId,
                  cId: this.dataInfo.collage.collageId,
                  collageId: this.dataInfo.collage.collageId,
                  ckFrom: this.dataInfo.collage.prodType,
                  relType: this.relType,
                  type: 1,
                  recRelateId: this.recRelateId,
                  recType: this.recType,
                  groupId: -1
                };
                if (this.goodsRoomId) {
                  pathQuery.goodsRoomId = this.goodsRoomId;
                }
                if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
                  pathQuery.courseType = this.dataInfo.collage.courseType;
                }
                if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                  pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
                }
                if (this.isShowFormlg) {
                  this.isShowBuy = false
                  this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
                } else {
                  this.goPay()
                }
              } else {
                let t = Number(this.dataInfo.collage.courseType);
                switch (t) {
                  case 0:
                    this.relType = 3;
                    break;
                  case 1:
                    this.relType = 2;
                    break;
                  case 2:
                    this.relType = 1;
                    break;
                }
                let pathQuery = {
                  extId: this.dataInfo.collage.prodId,
                  collageId: this.dataInfo.collage.collageId,
                  cId: this.dataInfo.collage.collageId,
                  ckFrom: this.dataInfo.collage.prodType,
                  relType: this.relType,
                  type: 1,
                  relId: this.dataInfo.collage.prodId,
                  recRelateId: this.recRelateId,
                  recType: this.recType,
                  groupId: -1
                };
                if (this.goodsRoomId) {
                  pathQuery.goodsRoomId = this.goodsRoomId;
                }
                if (this.dataInfo.collage.prodType == global.ckFrom.collageCourse) {
                  pathQuery.courseType = this.dataInfo.collage.courseType;
                }
                if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                  pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
                }
                if (this.isShowFormlg && this.dataInfo.collage.prodType != this.cfrom.collageEbooks) {
                  // 如果是电子书特殊处理--参团没有跳转表单
                  this.isShowBuy = false
                  this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
                } else {
                  this.goPay()
                }
              }
            } else {
              if (this.dataInfo.collage.prodType == this.cfrom.distributionCollageColumn || this.dataInfo.collage.prodType == this.cfrom.distributionColumnPay || this.dataInfo.collage.prodType == this.cfrom.collageColumn || this.dataInfo.collage.prodType == this.cfrom.collageCourse || this.dataInfo.collage.prodType == this.cfrom.collagePackage || this.dataInfo.collage.prodType == this.cfrom.collageLive || this.dataInfo.collage.prodType == this.cfrom.collageCamp || this.dataInfo.collage.prodType == this.cfrom.collageSocial || this.dataInfo.collage.prodType == this.cfrom.collageClockIn || this.dataInfo.collage.prodType == this.cfrom.collageItemBank || this.dataInfo.collage.prodType == this.cfrom.collageEdu || this.dataInfo.collage.prodType == this.cfrom.collageEbooks || this.dataInfo.collage.prodType == this.cfrom.collagePersonalLive) {
                this.goPay();
              } else {
                let ckFrom = this.dataInfo.collage.prodType;
                let pathQuery = {
                  prodId: this.dataInfo.collage.prodId,
                  collageId: this.dataInfo.collage.collageId,
                  groupId: -1,
                  type: ckFrom,
                  recRelateId: this.recRelateId,
                  recType: this.recType,
                };
                if (this.goodsRoomId) {
                  pathQuery.goodsRoomId = this.goodsRoomId;
                }
                if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 2) {
                  pathQuery.stepIndex = this.dataInfo.collage.collageGrades[this.choosePriceIndex].index;
                }
                this.isShowBuy = false
                this.$routerGo(this, "push", {
                  path: "/member/vip/vipBuy",
                  query: pathQuery
                });
              }
            }
          }
        }
      }
    },
  }
}
</script>